﻿<div [@routerTransition]>


    <div class="m-subheader ">
        <div class="row align-items-center">
            <div class="mr-auto col-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    <span>{{"AuditLogs" | localize}}</span>
                </h3>
            </div>
        </div>
    </div>

    <div class="m-content">
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__body">
                <tabset class="tab-container tabbable-line">
                    <tab heading="{{'OperationLogs' | localize}}" customClass="m-tabs__item">
                        <div class="row margin-bottom-10">
                            <div class="col-sm-12 text-right">
                                <button type="button" class="btn btn-success" (click)="exportToExcelAuditLogs()"><i class="far fa-file-excel"></i> {{"ExportToExcel" | localize}}</button>
                                <button type="button" class="btn btn-metal" (click)="getAuditLogs()"><i class="fa fa-sync"></i> {{"Refresh" | localize}}</button>
                            </div>
                        </div>

                        <div class="m-form m-form--label-align-right">
                            <form class="horizontal-form" #auditFilterForm="ngForm" (ngSubmit)="getAuditLogs()">
                                <div class="row align-items-center m--margin-bottom-10">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="StartEndRange" class="control-label">{{"DateRange" | localize}}</label>
                                            <input class="form-control"
                                                   id="StartEndRange"
                                                   name="StartEndRange"
                                                   #drp="bsDaterangepicker"
                                                   readonly="readonly"
                                                   bsDaterangepicker
                                                   dateRangePickerInitialValue
                                                   [(ngModel)]="dateRange">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="UsernameAuditLog" class="control-label">{{"UserName" | localize}}</label>
                                            <input id="UsernameAuditLog" type="text" name="UsernameAuditLog" class="form-control" [(ngModel)]="usernameAuditLog">
                                        </div>
                                    </div>
                                </div>

                                <div *ngIf="advancedFiltersAreShown" class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="ServiceName" class="control-label">{{"Service" | localize}}</label>
                                            <input id="ServiceName" name="ServiceName" type="text" class="form-control" [(ngModel)]="serviceName">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="control-label" style="display: block">{{"Duration" | localize}}</label>
                                        <div class="input-group" style="width: 250px !important;">
                                            <input type="text" name="MinExecutionDuration" only-number="" class="form-control" min="0" max="86400000" ng-minlength="0" ng-maxlength="8" [(ngModel)]="minExecutionDuration">
                                            <span class="input-group-addon">
                                                ---
                                            </span>
                                            <input type="text" name="MaxExecutionDuration" only-number="" class="form-control" min="0" max="86400000" ng-minlength="0" ng-maxlength="8" [(ngModel)]="maxExecutionDuration">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="MethodName" class="control-label">{{"Action" | localize}}</label>
                                            <input id="MethodName" type="text" name="MethodName" class="form-control" [(ngModel)]="methodName">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="HasException" class="control-label">{{"ErrorState" | localize}}</label>
                                            <select id="HasException" name="HasException" class="form-control" [(ngModel)]="hasException">
                                                <option value="">{{"All" | localize}}</option>
                                                <option value="false">{{"Success" | localize}}</option>
                                                <option value="true">{{"HasError" | localize}}</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="BrowserInfo" class="control-label">{{"Browser" | localize}}</label>
                                            <input id="BrowserInfo" type="text" name="BrowserInfo" class="form-control" [(ngModel)]="browserInfo">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                        </div>
                                    </div>
                                </div>
                                <div class="row m--margin-bottom-10">
                                    <div class="col-sm-6">
                                        <span class="clickable-item text-muted" *ngIf="!advancedFiltersAreShown" (click)="advancedFiltersAreShown=!advancedFiltersAreShown"><i class="fa fa-angle-down"></i> {{"ShowAdvancedFilters" | localize}}</span>
                                        <span class="clickable-item text-muted" *ngIf="advancedFiltersAreShown" (click)="advancedFiltersAreShown=!advancedFiltersAreShown"><i class="fa fa-angle-up"></i> {{"HideAdvancedFilters" | localize}}</span>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="row align-items-center">
                            <!--<Primeng-TurboTable-Start>-->
                            <div class="primeng-datatable-container" [busyIf]="primengTableHelperAuditLogs.isLoading">
                                <p-table #dataTableAuditLogs
                                         (onLazyLoad)="getAuditLogs($event)"
                                         [value]="primengTableHelperAuditLogs.records"
                                         rows="{{primengTableHelperAuditLogs.defaultRecordsCountPerPage}}"
                                         [paginator]="false"
                                         [lazy]="true"
                                         scrollable="true"
                                         ScrollWidth="100%"
                                         responsive="primengTableHelperAuditLogs.isResponsive"
                                         resizableColumns="primengTableHelperAuditLogs.resizableColumns">
                                    <ng-template pTemplate="header">
                                        <tr>
                                            <th style="width:75px"></th>
                                            <th style="width:75px"></th>
                                            <th style="width: 150px" pSortableColumn="executionTime">
                                                {{'Time' | localize}}
                                                <p-sortIcon field="executionTime"></p-sortIcon>
                                            </th>
                                            <th style="width: 150px" pSortableColumn="userName">
                                                {{'UserName' | localize}}
                                                <p-sortIcon field="userName"></p-sortIcon>
                                            </th>
                                            <th style="width: 250px">
                                                {{'Service' | localize}}
                                            </th>
                                            <th style="width: 250px">
                                                {{'Action' | localize}}
                                            </th>
                                            <th style="width: 100px" pSortableColumn="executionDuration">
                                                {{'Duration' | localize}}
                                                <p-sortIcon field="executionDuration"></p-sortIcon>
                                            </th>
                                            <th style="width: 150px">
                                                {{'IpAddress' | localize}}
                                            </th>
                                            <th style="width: 150px">
                                                {{'Client' | localize}}
                                            </th>
                                            <th style="width: 150px">
                                                {{'Browser' | localize}}
                                            </th>
                                        </tr>
                                    </ng-template>
                                    <ng-template pTemplate="body" let-record="$implicit">
                                        <tr>
                                            <td style="width: 75px">
                                                <div class="text-center">
                                                    <button class="btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill" (click)="showAuditLogDetails(record)"><i class="la la-search" [attr.aria-label]="l('Search')"></i></button>
                                                </div>
                                            </td>
                                            <td style="width: 75px">
                                                <div class="text-center">
                                                    <i *ngIf="record.exception" class="fa fa-exclamation-triangle m--font-warning"></i>
                                                    <i *ngIf="!record.exception" class="fa fa-check-circle m--font-success"></i>
                                                </div>
                                            </td>
                                            <td style="width: 150px">
                                                <span class="ui-column-title">{{'Time' | localize}}</span>
                                                {{ record.executionTime | momentFormat:'YYYY-MM-DD HH:mm:ss'}}
                                            </td>
                                            <td style="width: 150px">
                                                <span class="ui-column-title">{{'UserName' | localize}}</span>
                                                {{record.userName}}
                                            </td>
                                            <td style="width: 250px">
                                                <span class="ui-column-title">{{'Service' | localize}}</span>
                                                {{record.serviceName}}
                                            </td>
                                            <td style="width: 250px">
                                                <span class="ui-column-title">{{'Action' | localize}}</span>
                                                {{record.methodName}}
                                            </td>
                                            <td style="width: 100px">
                                                <span class="ui-column-title">{{'Duration' | localize}}</span>
                                            </td>
                                            <td style="width: 150px">
                                                <span class="ui-column-title">{{'IpAddress' | localize}}</span>
                                                {{record.clientIpAddress}}
                                            </td>
                                            <td style="width: 150px">
                                                <span class="ui-column-title">{{'Client' | localize}}</span>
                                                {{record.clientName}}
                                            </td>
                                            <td style="width: 150px">
                                                <span class="ui-column-title">{{'Browser' | localize}}</span>
                                                <span title="{{record.browserInfo}}">{{truncateStringWithPostfix(record.browserInfo, 20)}}</span>
                                            </td>
                                        </tr>
                                    </ng-template>
                                </p-table>
                                <div class="primeng-no-data" *ngIf="primengTableHelperAuditLogs.totalRecordsCount == 0">
                                    {{'NoData' | localize}}
                                </div>
                                <div class="primeng-paging-container">
                                    <p-paginator [rows]="primengTableHelperAuditLogs.defaultRecordsCountPerPage"
                                                 #paginatorAuditLogs
                                                 (onPageChange)="getAuditLogs($event)"
                                                 [totalRecords]="primengTableHelperAuditLogs.totalRecordsCount"
                                                 [rowsPerPageOptions]="primengTableHelperAuditLogs.predefinedRecordsCountPerPage">
                                    </p-paginator>
                                    <span class="total-records-count">
                                        {{'TotalRecordsCount' | localize:primengTableHelperAuditLogs.totalRecordsCount}}
                                    </span>
                                </div>
                            </div>
                            <!--<Primeng-TurboTable-End>-->
                        </div>
                    </tab>
                    <tab heading="{{'ChangeLogs' | localize}}" customClass="m-tabs__item">
                        <div class="row margin-bottom-10">
                            <div class="col-sm-12 text-right">
                                <button type="button" class="btn btn-success" (click)="exportToExcelEntityChanges()"><i class="far fa-file-excel"></i> {{"ExportToExcel" | localize}}</button>
                                <button type="button" class="btn btn-metal" (click)="getEntityChanges()"><i class="fa fa-sync"></i> {{"Refresh" | localize}}</button>
                            </div>
                        </div>
                        <div class="m-form m-form--label-align-right">
                            <form class="horizontal-form" #entityChangeFilterForm="ngForm" (ngSubmit)="getEntityChanges()">
                                <div class="row align-items-center m--margin-bottom-10">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="StartEndRangeEntityChange" class="control-label">{{"DateRange" | localize}}</label>
                                            <input class="form-control" id="StartEndRangeEntityChange" name="StartEndRangeEntityChange" readonly="readonly" #drp="bsDaterangepicker" bsDaterangepicker [(ngModel)]="dateRange">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="UserNameEntityChange" class="control-label">{{"UserName" | localize}}</label>
                                            <input id="UserNameEntityChange" type="text" name="UserNameEntityChange" class="form-control" [(ngModel)]="usernameEntityChange">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="EntityTypeFullName" class="control-label">{{"Object" | localize}}</label>

                                            <select id="EntityTypeFullName" name="EntityTypeFullName" class="form-control" [(ngModel)]="entityTypeFullName">
                                                <option value=undefined selected="selected">{{"All" | localize}}</option>
                                                <option *ngFor="let objectType of objectTypes" [value]="objectType.value">{{objectType.name}}</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>

                        <div class="row align-items-center">
                            <!--<Primeng-TurboTable-Start>-->
                            <div class="primeng-datatable-container" [busyIf]="primengTableHelperEntityChanges.isLoading">
                                <p-table #dataTableEntityChanges
                                         (onLazyLoad)="getEntityChanges($event)"
                                         [value]="primengTableHelperEntityChanges.records"
                                         rows="{{primengTableHelperEntityChanges.defaultRecordsCountPerPage}}"
                                         [paginator]="false"
                                         [lazy]="true"
                                         scrollable="true"
                                         ScrollWidth="100%"
                                         responsive="primengTableHelperEntityChanges.isResponsive"
                                         resizableColumns="primengTableHelperEntityChanges.resizableColumns">
                                    <ng-template pTemplate="header">
                                        <tr>
                                            <th style="width: 40px">
                                            </th>
                                            <th style="width: 150px">
                                                {{'Action' | localize}}
                                            </th>
                                            <th style="width: 250px">
                                                {{'Object' | localize}}
                                            </th>
                                            <th style="width: 150px" pSortableColumn="userName">
                                                {{'UserName' | localize}}
                                                <p-sortIcon field="userName"></p-sortIcon>
                                            </th>
                                            <th style="width: 150px" pSortableColumn="changeTime">
                                                {{'Time' | localize}}
                                                <p-sortIcon field="changeTime"></p-sortIcon>
                                            </th>
                                        </tr>
                                    </ng-template>
                                    <ng-template pTemplate="body" let-record="$implicit">
                                        <tr>
                                            <td style="width: 40px">
                                                <div class="text-center">
                                                    <button class="btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill" (click)="showEntityChangeDetails(record)"><i class="la la-search" [attr.aria-label]="l('Search')"></i></button>
                                                </div>
                                            </td>
                                            <td style="width: 150px">
                                                <span class="ui-column-title">{{'Action' | localize}}</span>
                                                <span title="{{record.changeTypeName}}">{{l(record.changeTypeName)}}</span>
                                            </td>
                                            <td style="width: 250px">
                                                <span class="ui-column-title">{{'Object' | localize}}</span>
                                                {{record.entityTypeFullName}}
                                            </td>
                                            <td style="width: 150px">
                                                <span class="ui-column-title">{{'UserName' | localize}}</span>
                                                {{record.userName}}
                                            </td>
                                            <td style="width: 150px">
                                                <span class="ui-column-title">{{'Time' | localize}}</span>
                                                {{ record.changeTime | momentFormat:'YYYY-MM-DD HH:mm:ss'}}
                                            </td>
                                        </tr>
                                    </ng-template>
                                </p-table>
                                <div class="primeng-no-data" *ngIf="primengTableHelperEntityChanges.totalRecordsCount == 0">
                                    {{'NoData' | localize}}
                                </div>
                                <div class="primeng-paging-container">
                                    <p-paginator [rows]="primengTableHelperEntityChanges.defaultRecordsCountPerPage"
                                                 #paginatorEntityChanges
                                                 (onPageChange)="getEntityChanges($event)"
                                                 [totalRecords]="primengTableHelperEntityChanges.totalRecordsCount"
                                                 [rowsPerPageOptions]="primengTableHelperEntityChanges.predefinedRecordsCountPerPage">
                                    </p-paginator>
                                    <span class="total-records-count">
                                        {{'TotalRecordsCount' | localize:primengTableHelperEntityChanges.totalRecordsCount}}
                                    </span>
                                </div>
                            </div>
                            <!--<Primeng-TurboTable-End>-->
                        </div>
                    </tab>
                </tabset>
            </div>
        </div>
    </div>

    <auditLogDetailModal #auditLogDetailModal></auditLogDetailModal>
    <entityChangeDetailModal #entityChangeDetailModal></entityChangeDetailModal>
</div>
